import {PageContainer} from '@ant-design/pro-layout';
import ProTable, {ProColumns} from '@ant-design/pro-table';
import {useRef, useState} from 'react';
import DetailModal from './components/DetailModal';
import SearchForm from './components/SearchForm';
import {API} from "@/services/typings";
import {ActionType} from "@ant-design/pro-components";
import {pageSysJobLog} from "@/pages/job/job-log/service";

const SysJobLogManager = () => {
  const [detailVisible, setDetailVisible] = useState(false);
  const [currentRow, setCurrentRow] = useState<API.ISysJobLog>();
  const actionRef = useRef<ActionType>();
  const [searchParams, setSearchParams] = useState<Record<string, any>>({});

  // 表格列配置
  const columns: ProColumns<API.ISysJobLog>[] = [
    {
      title: '日志ID',
      dataIndex: 'jobLogId',
      width: 100,
      search: false,
    },
    {
      title: '任务名称',
      dataIndex: 'jobName',
      width: 150,
    },
    {
      title: '任务组',
      dataIndex: 'jobGroup',
      width: 120,
      valueEnum: {
        'DEFAULT': {text: '默认'},
        'SYSTEM': {text: '系统'},
      },
    },
    {
      title: '执行状态',
      dataIndex: 'status',
      width: 100,
      valueEnum: {
        '0': {text: '成功', status: 'Success'},
        '1': {text: '失败', status: 'Error'},
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      valueType: 'dateTime',
      width: 180,
      search: false,
    },
    {
      title: '操作',
      width: 120,
      valueType: 'option',
      render: (_, record) => [
        <a
          key="detail"
          onClick={() => {
            setCurrentRow(record);
            setDetailVisible(true);
          }}
        >
          详情
        </a>,
      ],
    },
  ];

  return (
    <div>
      <ProTable<API.ISysJobLog>
        actionRef={actionRef}
        rowKey="jobLogId"
        search={false}
        tableStyle={{
          minHeight: 360
        }}
        toolBarRender={() => [
          <SearchForm
            key="search"
            onSearch={(values) => {
              setSearchParams(values);
              actionRef.current?.reload();
            }}
          />,
        ]}
        request={async (params = {}, sort, filter) => {
          const {data} = await pageSysJobLog({
            ...params,
            ...searchParams,
          });
          return data
        }}
        pagination={{
          pageSize: 15,
        }}
        columns={columns}
      />

      <DetailModal
        visible={detailVisible}
        onClose={() => {
          setDetailVisible(false);
          setCurrentRow(undefined);
        }}
        data={currentRow}
      />
    </div>
  );
};

export default SysJobLogManager;
